<%@ page language="java" contentType="text/html; charset=UTF-8" isELIgnored="false"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>">
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/ops.js" type="text/javascript"></script>
    <link href="css/UserCSS.css" rel="stylesheet" type="text/css" />
    <link href="style/common.css" rel="stylesheet" type="text/css">
	<link href="style/style.css" rel="stylesheet" type="text/css">
    <script src="js/jquery3.min.js" type="text/javascript"></script>
<style type="text/css">
	input{
		margin-bottom: 4px;
		color: blue;
	}
	label{
		margin-left: 0px;
	}
	button {
		color:brown;
		margin-left:160px;
		width:40px;
	}
	#sex{
		border: 0px solid white;
	}
</style>
</head>
<body style="width: 984px;height:450px;margin: 10px auto;">
    <div class="row" style="margin-top: 10px;"></div>
        <div class="u-menu">
            <ul class="u-nav" id="user_menu">
                <li class="item" id="user_menu_my" name="user_menu_my">
                    <h3 class="t1">我的个人中心<span title="折叠"></span></h3>
                    <ul class="sub">
                        <!-- <li><a href="个人主页.jsp">个人主页</a></li> -->
                        <li><a class="current" href="个人资料.jsp">个人资料</a></li>
                        <li><a href="认证管理.jsp">认证管理</a></li>
                        <li><a href="密码管理.jsp">密码设置</a></li>
                    </ul>
                </li>              
                <li class="item" id="user_menu_loan" name="user_menu_loan">
                    <h3 class="t3">贷款管理<a name="user_login"></a><span title="折叠"></span></h3>
                    <ul class="sub">
                          <li><a href="queryRetmsgInfo.do">我的贷款</a></li>
						  <li><a href="queryRepaymentInfo.do">偿还贷款</a></li>
						  <li><a href="LoanStatistics.do"> 贷款统计</a></li>
					</ul>
                </li>
            </ul>
            <a href="homePage.jsp" style="font-size: 20px;color: blue;text-align: center;margin-left: 34px;">返回首页</a>
			<script type="text/javascript">
			    var menuClosed = Ops.getCookie('menuClosed');
			    $(".item h3 span").click(function () {
			        menuClosed = Ops.getCookie('menuClosed');
			        if (menuClosed == undefined || menuClosed == null) {
			            menuClosed = '';
			            Ops.setCookie('menuClosed', menuClosed);
			      	}
			        //console.log(menuClosed+',click;;;');	
			        $(this).parent().parent().toggleClass('bg-slide');
			        $(this).parent().parent().find(".sub").slideToggle('fast');
			
			        if ($(this).attr('title') == '折叠') {
			            $(this).attr('title', '展开');
			        } else {
			            $(this).attr('title', '折叠');
			        }
			        var pid = $(this).parent().parent().attr('id');
			        if ($(this).parent().parent().hasClass('bg-slide') && menuClosed.indexOf("#" + pid + "#") == -1) {
			            var cookies = menuClosed + '#' + pid + '#';
			        } else {
			            var cookies = menuClosed.replace("#" + pid + "#", '');
			        }
			        Ops.setCookie('menuClosed', cookies);
			   });
			  if (menuClosed != null) {
			     var closedMatch = menuClosed.match(/([a-z_]+)/g);
			     for (var i in closedMatch) {
			         var idObj = $('#' + closedMatch[i]);
			         idObj.toggleClass('bg-slide');
			         idObj.find(".sub").hide();
			         idObj.find('h3 span').attr('title', '展开');
			     }
			  } else {
			     $("#user_menu_loan h3 span").click();
			  }
			</script>
		</div>
		<!-- div.1 -->

        <div class="u-main" style="margin-right: 25px;">
            <div class="ucenter">
        	<!-- div.2 -->
            <div id="tab_menu">
                <ul class="u-tab clearfix" style="width: 780px;">
                    <li class="current"><a>个人详细信息</a></li>
                    <li><a>工作认证信息</a></li>
                    <li><a>联系人信息</a></li>
                </ul>
            </div>
        	<div id="tab_box">
                <div class="u-form-wrap" style="border: 0px; padding: 0px;">
	                 <div class="ucenter-info mt10">
	                	 <div class="info-title"><h5>我的个人主页</h5></div>
		                 	 <div class="info">
		                      <ul class="info-img"><li><img src="images/tx_img.gif" class="avatar" /></li></ul>
		                      <div class="info-main">
		                           <div class="row">
		                           		<label>用户名：</label>
                       					<input type="text" class="message" readonly="readonly" onblur="isNoNM()" value="${userInfo.u_name}" id="u_name">
                       					<span id="msg1">&nbsp;</span>
                       					
                       					<label>性别：</label>
                       					<select id="sex" disabled="disabled">
										   <option <c:if test="${userInfo.u_sex=='男'}">selected</c:if> >男</option>
										   <option <c:if test="${userInfo.u_sex=='女'}">selected</c:if> >女</option>
										</select>
                       					
                       					<label style="display: none;">ID：</label>
                       					<input type="text" readonly= "readonly" value="${userInfo.u_id}" style="width: 20px;display: none;" id="u_id" >
		                           </div>
		                           <div class="row"><label>手机号码：</label>
		                           					<input type="text" readonly= "readonly" onblur="isNoPH()" value="${userInfo.phone}" id="phone">
		                           					<span id="msg2">&nbsp;</span>
		                           					
		                           					<label>Email：</label>
		                           					<input type="text" class="message" readonly="readonly" onblur="isNoEM()" value="${userInfo.email}" id="email">
		                           					<span id="msg3">&nbsp;</span>
		                           </div>
		                           <div class="row"><label>地址：</label>
		                           					<input type="text" class="message" readonly= "readonly" onblur="isNoAR()" value="${userInfo.address}" id="address">
		                           					<label>账户余额：</label>
		                           					<input type="text" readonly= "readonly" value="${userInfo.balance}" id="balance">
		                           </div>
		                           <div class="row"><label>角色：</label><span class="orange">普通会员 &nbsp;&nbsp; 借入者</span></div>
		                           <div class="row"><label>个人统计：</label>
		                           				<span class="orange">0</span>&nbsp;条贷款记录 ， 共计&nbsp;
		      									<span class="orange">0</span>&nbsp;元； 
		      									<span class="orange">0</span>&nbsp;条投标记录 ， 共计&nbsp;
		      									<span class="orange">0.00</span>&nbsp;元。
		                           </div>
		                           <div style="margin: 10px auto;">
		                           		<button id="update">修改</button>
		                           		<button id="affirm" style="display: none;" >确认</button>
		                           </div>
		                           <span id="msg4" style="text-align:center;">&nbsp;</span>
		                           
	                           </div>
	                       <div class="clear"></div>
	                  </div>
	              </div> 
	              <div class="ucenter-info mt10">
		              <div class="ucenter-tab-box">
		                   <ul class="u-tab clearfix" style="margin-left: 0px;"><li><a>贷款记录</a></li></ul>
		              </div> 
                      <div class="u-form-wrap" >
                   	 	   <div> 这是我的贷款记录</div>
                      </div>              
	           	   </div>
                </div>
                <div class="u-form-wrap" style="display: none;">
                	<div class="uf-tips"><span class="red">*</span> 为必填项，所有资料均会严格保密。</div>
                	<div>这是工作认证信息</div>
                </div>
                <div class="u-form-wrap" style="display: none;">
                    <div class="uf-tips"><span class="red">*</span> 为必填项，所有资料均会严格保密。</div>
                    <div>这是联系人信息</div>
                </div>
            </div>

        	<script type="text/javascript">
            var $div_li = $("#tab_menu ul li");
            $div_li.click(function () {
                $(this).addClass("current").siblings().removeClass("current");
                var div_index = $div_li.index(this);
                $("#tab_box>div").eq(div_index).show().siblings().hide();
            }).hover(function () {
                $(this).addClass("hover");
            }, function () {
                $(this).removeClass("hover");
            });
        </script>
        </div>
    </div>
</body>
<script type="text/javascript">
	


	/* 点击修改按钮，信息进入可修改状态 */
	$("#update").click(function(){
    	$(".message[readonly='readonly']").removeProp("readonly");
    	$('#sex').attr("disabled",false);
    	$("#update").css("display","none");
    	$("#affirm").css("display","block");
    	$(".message").css("border","1px solid gray");
    	$("#sex").css("border","1px solid gray");
	});
	
	/* 检测各项内容是否达到要求 */
	var a=true;
	/* var b=true; */
	var c=true;
	
	/* 检查用户名格式 */
	function isNoNM(){  
		var name = /^[0-9a-zA-Z]{4,10}$/;  
		var content = $("#u_name").val();
	       if(!name.test(content)){
	    	    $("#msg1").html("*");
				$("#msg1").css("color","red"); 
				a=false;
	       }else{
	    	    $("#msg1").html("&nbsp;");
				$("#msg1").css("color","white"); 
				a = true;
	       }
	}
	
/* 	 检查手机格式 
	function isNoPH(){  
		var phone = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;  
		var content = $("#phone").val();
	       if(!phone.test(content)){
	    	    $("#msg2").html("*");
				$("#msg2").css("color","red"); 
				b=false;
	       }else{
	    	    $("#msg2").html("&nbsp;");
				$("#msg2").css("color","white"); 
				b = true;
	       }
	} */
	
	/* 检查邮箱格式 */
	function isNoEM(){  
		var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;  
		var content = $("#email").val();
	       if(!email.test(content)){
	    	    $("#msg3").html("*");
				$("#msg3").css("color","red"); 
				c=false;
	       }else{
	    	    $("#msg3").html("&nbsp;");
				$("#msg3").css("color","white"); 
				c = true;
	       }
	}
	
	$("#affirm").click(function(){
		if(a==true&&c==true){
			$.ajax({
				data:{"u_id":$("#u_id").val(),"u_name":$("#u_name").val(),"u_sex":$("select option:checked").text(),
					  "email":$("#email").val(),"address":$("#address").val()},
				type:"post",
				url:"<%=basePath%>updateUserInfoById.do",
				dataType:"json",
				success:function(data){
					if(data.result=="errorName"){
						$("#msg4").html("此用户名已存在！");
						$("#msg4").css("color","red"); 
					}else{
						if(data.result==true){
							alert("信息修改成功！");
							location.href="<%=basePath%>个人资料.jsp";
						}else{
							alert("信息修改失败！");
							location.href="<%=basePath%>个人资料.jsp"
						}
					}
				},
				error:function(){
					alert("失败!");
				}
			});
		}else{
			$("#msg4").html("输入信息有误!");
			$("#msg4").css("color","red"); 
		}
		
	});
	
	
	



</script>
</html>